<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item, index) in goodsinfo.goods_images" :key="index">
				<image class="swiper-item" :src="item.full_url"></image>
			</swiper-item>
		</swiper>
		
		<view class="pricebox" v-if="goodsinfo">
			<view class="numbox">
				<view class="leftbox">
					<view class="originalprice" v-if="goodsinfo.is_points_discount == 0">
						<text>￥</text>{{ goodsinfo.goods_price_min }}
					</view>

					<!-- 积分商品 -->
					<view class="originalprice" v-else>
						{{ goodsinfo.goods_price_min }}<text>积分</text>
					</view>
					<view class="crossedprice" v-if="goodsinfo.is_points_discount == 0 && goodsinfo.line_price_min > 0">
						￥{{ goodsinfo.line_price_min }}</view>
				</view>
				<view class="rightbox">
					现货发售
				</view>
			</view>
			<view class="goodsname">
				{{ goodsinfo.goods_name }}
			</view>
			<!-- is_seck 0否  1是 -->
			<view style="margin-top: 20rpx;" v-if="goodsinfo.is_seck==1&&(item.seck_end_time*1000)>time>=(item.seck_start_time*1000)">
				<countdown :startTime="dateFormat(goodsinfo.seck_start_time)" :endTime="dateFormat(goodsinfo.seck_end_time)" />
			</view>
			<view class="inventory">
				<view>运费：0.00</view>
				<view>{{ goodsinfo.sales_actual || 0 }}人付款</view>
			</view>
		</view>
		<view v-if="goodsinfo.goods_name.length>20&&goodsinfo.is_seck==1&&(item.seck_end_time*1000)>time>=(item.seck_start_time*1000)" style="height: 360rpx;"></view>
		<view v-else style="height: 310rpx;"></view>
		<view class="pickup">
			<view class="stoke">
				<view class="stokename">库存</view>
				<view style="font-size: 28rpx;">还剩{{ goodsinfo.stock_total }}件</view>
			</view>
			<!-- <view class="stoke" @click="openmodel(3)">
				<view class="stokename">选择</view>
				<view class="delivery">
					<view :class="[index==currone?'actdelivery':'deliveryitem']" v-for="(item,index) in deliverylist"
						:key="index" @click="handdelivery(index)">
						<view>{{item}}</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="guarantee">
			<view class="wx" @click="openmodel(2)">
				<image src="../../static/bz.png"></image>
				<view style="color: #1AAA3B;">微信交易保障</view>
			</view>
			<view class="wx">商家认证·交易监管·无忧售后·争议处理·快速发货</view>
		</view>
		<!-- 评论 -->
		<view class="commentbox">
			<view class="commentname">
				<view>宝贝评论({{ goodsComment.commentCount }}）</view>
				<view class="morebox" @click="tocomment()">
					<view>更多</view>
					<image src="../../static/jt.png"></image>
				</view>
			</view>
			<comment :list="commentList.slice(0, 2)"></comment>
		</view>
		<!-- 推荐 -->
		<!-- <recommend></recommend> -->
		<!-- 商品详情 -->
		<view class="goodstext">
			<view class="titbox">
				<image src="../../static/tit.png"></image>
				<view>商品详情</view>
			</view>
			<view class="contenr" v-if="detail&&goodsinfo.store_id==32">
			  <image
			    class="img"
			    mode="widthFix"
			    v-for="(item, index) in sendData"
			    :key="index"
			    :src="item"
			  />
			</view>
			<view v-else v-html="content"></view>
		</view>
		<!-- 底部操作栏 -->
		<view style="height: 120rpx;"></view>
		<!-- is_group   是否团购 0否 1是 ， is_seck 是否是秒杀 0否 1是-->
		<!-- goods_type 1供应商 2商家 (供应商商品只能邮寄不能自提，商家商品只能自提跟外卖配送) -->
		<view class="navbut" v-if="goodsinfo.is_group==1||(goodsinfo.is_seck==1&&(item.seck_end_time*1000)>time>=(item.seck_start_time*1000))||goodsinfo.store_id==32">
			<view class="actionnav" @click="tohome()">
				<image src="../../static/sy.png"></image>
				<view>{{goodsinfo.goods_type==1?'首页':'店铺'}}</view>
			</view>
			<view class="actionnav" @click="tocollect(goodsinfo.is_collect)" v-if="goodsinfo.is_points_discount == 0">
				<image v-if="goodsinfo.is_collect == 0" src="../../static/sc.png"></image>
				<image v-else src="../../static/sc1.png"></image>
				<view>收藏</view>
			</view>
			<!-- <view class="actionnav" @click="toShoppingCartpage()">
				<image src="../../static/gwc.png"></image>
				<view class="numbox" v-if="listlength > 0">{{ listlength > 99 ? '99+' : listlength }}</view>
				<view>购物车</view>
			</view> -->
			<view class="addact" style="width: 59%;">
				<!-- <view class="car" @click="openmodel(1)">加入购物车</view> -->
				<view class="but" @click="openmodel(4)">立即购买</view>
			</view>
		</view>
		<view class="navbut" v-else>
			<view class="actionnav" @click="tohome()">
				<image src="../../static/sy.png"></image>
				<view>{{goodsinfo.goods_type==1?'首页':'店铺'}}</view>
			</view>
			<view class="actionnav" @click="tocollect(goodsinfo.is_collect)" v-if="goodsinfo.is_points_discount == 0">
				<image v-if="goodsinfo.is_collect == 0" src="../../static/sc.png"></image>
				<image v-else src="../../static/sc1.png"></image>
				<view>收藏</view>
			</view>
			<view class="actionnav" @click="toShoppingCartpage()">
				<image src="../../static/gwc.png"></image>
				<view class="numbox" v-if="listlength > 0">{{ listlength > 99 ? '99+' : listlength }}</view>
				<view>购物车</view>
			</view>
			<view class="addact">
				<view class="car" @click="openmodel(1)">加入购物车</view>
				<view class="buy" @click="openmodel(4)">立即购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<!-- modelindex  1是购物车,2为交易保障,3为取货方式,4为立即购买-->

			<modelinfo v-if="modelindex == 1 || modelindex == 4 || modelindex == 5" :addorcar="addorcar" :jifen="jifen"
				:addressid="dzindex" @toShoppingCart="toShoppingCart" :info="goodsinfo" @close="close"
				@toorder="toorder">
			</modelinfo>
			<protection v-if="modelindex == 2" @close="close"></protection>
			<!-- <pickup v-if="modelindex==3" :addresslist="addresslist" @close="close" :seftpick="seftpick" 
			 @addressid="addressid" :currone="currone" @deliverymethod="delivery_method"></pickup> -->
		</uni-popup>
	</view>
</template>

<script>
	import comment from '../../components/comment.vue'
	import recommend from '../../components/recommend.vue'
	import modelinfo from '../../components/bottompopup.vue'
	import protection from '../../components/protection.vue'
	import pickup from '../../components/pickup.vue'
	import countdown from '@/components/cz-countdown/cz-countdown.vue'
	export default {
		components: {
			comment,
			recommend,
			modelinfo,
			protection,
			pickup,countdown
		},
		data() {
			return {
				currone: null, //配送方式
				modelindex: null, //分辨弹窗，1是购物车,2为交易保障,3为取货方式
				id: '', //商品id
				goodsinfo: {}, //商品详情
				list: ['../../static/logo.png', '../../static/logo.png', '../../static/logo.png'],
				deliverylist: ['自提', '物流配送'],
				id: '',
				spec_type: '', //10为单规格 20为多规格
				bannerlist: [], //商品轮播图
				goodsinfo: null, //商品详情
				skuList: [], //多规格
				commentList: [], //评论列表
				commentCount: '', //评论列表数量
				content: '', //商品详情
				addorcar: null, //布尔值，判断弹窗内容是购物车(true),还是立即购买(false)
				jifen: null, //布尔值，判断弹窗商品是积分(true),还是非积分商品(false)
				addresslist: [], //地址列表
				dzindex: '', //默认地址id
				carlist: [],
				seftpick: '', //自提门店
				goodsComment: {},
				time: new Date().getTime(),
				detail:{},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo()
		},
		computed: {
			listlength() {
				let listlength = 0;
				this.carlist = uni.getStorageSync('carlist') || []
				// goods_type 1供应商 2商家
				const a = this.carlist.filter(item => item.id == this.id)
				if (a.length > 0) {
					listlength = a[0].carnum
					console.log(a, 'a', listlength, a[0].carnum)
				}
				//是否代理商字段 is_agent 0否 1是 this.myinfo.is_agent==1?
				// return totalPrice
				return listlength // 保留小数点后2位
			},
			sendData () {
				if(this.goodsinfo.store_id==32){
					return this.fixHtml(this.detail)
				}
			}
		},
		methods: {
			fixHtml (html) {
			  let result = [];
			  (html.match(/background-image:url\(.+?(?=\))/g) || []).forEach(item => {
			    result.push(item.replace(/background-image:url\(/g, ''));
			  });
			  return [...new Set(result)]
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				// return {
				//   title: "邀请好友",
				//   path: '/pages/index/index?pid='+this.id
				// }
			},
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
				// 返回 2020-02-01 00:00:00
				return result;
			},
			onShareTimeline() {
				return {
					title: '快乐生活，就到云智慧选',
					path: "/pages/index/index"
				}
			},
			//配送方式选择
			handdelivery(index) {
				this.currone = index
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			//判断打开哪个弹窗
			openmodel(n) {
				this.modelindex = n
				if (n == 1) {
					this.addorcar = true //弹窗内容是购物车
					console.log(this.addorcar, 'this.addorcar')
				}
				if (n == 4) {
					this.addorcar = false
					this.jifen = false
					//判断弹窗内容是购物车(true),还是立即购买(false)
				}
				if (n == 5) { //n==5为积分商品
					this.addorcar = false
					this.jifen = true
					//判断弹窗内容是购物车(true),还是立即购买(false)
				}
				console.log(this.addorcar, 'this.addorcar')

				this.open()
			},
			close() {
				this.$refs.popup.close()
			},
			//获取商品详情
			//商品详情
			getinfo() {
				this.$http({
					url: 'api/Wechat/goodsDetail',
					data: {
						goods_id: this.id
					}
				}).then(res => {
					this.goodsinfo = res.data.goodsInfo
					this.goodsComment = res.data.goodsComment
					this.spec_type = res.data.goodsInfo.spec_type //spec_type 10为单规格 20为多规格
					this.skuList = res.data.goodsInfo.skuList
					this.commentList = res.data.goodsComment.commentList
					this.commentCount = res.data.goodsComment.commentCount
					if(res.data.goodsInfo.store_id== 32){
						this.detail = res.data.goodsInfo.content
					}else{
						this.content = this.$replace_Rich_text(this.goodsinfo.content) //商品详情
					}
					
					
					//spec_type 10为单规格 20为多规格
					if (this.spec_type == 20) {
						this.skuList.forEach(item => (
							this.bannerlist.push(item.image.full_url)
						))
					} else {
						this.bannerlist.push(res.data.goodsInfo.goods_images[0].full_url)
					}
				})
			},
			//收藏
			tocollect(n) {
				console.log(this.id, 'this.id', this.goodsinfo.id)
				if (n == 0) {
					this.$http({
						url: 'api/Wechat/collectGoods',
						data: {
							goods_id: this.id || this.goodsinfo.id,
							token: uni.getStorageSync('token'),
						}
					}).then(res => {
						this.getinfo()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				} else {
					const idlist = []
					idlist.push(+this.goodsinfo.collect_id)
					console.log(idlist, 'idlist')
					this.$http({
						url: 'api/Wechat/cancel_collect_goods',
						data: {
							id: idlist,
							token: uni.getStorageSync('token'),
						}
					}).then(res => {
						this.getinfo()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			},
			toShoppingCartpage() {
				console.log(this.goodsinfo.goods_type, 'this.goodsinfo.goods_type')
				if (this.goodsinfo.goods_type == 1) { // goods_type 1供应商 2商家
					uni.switchTab({
						url: '/pages/shoppingcar/shoppingcar'
					})
				} else {
					uni.setStorageSync('store_id', this.goodsinfo.store_id)
					uni.navigateTo({
						url: '/personalData/businesscar/businesscar?store_id=' + this.goodsinfo.store_id
					})
				}
			},
			//立即购买去下单 
			toorder(result) {
				const list = []
				this.goodsinfo.info = result
				this.goodsinfo.carnum = result.goods_num[0]
				// this.goodsinfo.carnum = result.goods_num[0]
				list.push(this.goodsinfo)
				console.log(result, list, 'result')
				if(this.goodsinfo.store_id==310){
					uni.navigateTo({
						url: '/pageshop/duty-free/duty-free?list=' + encodeURIComponent(JSON.stringify(list))
					})
				}else{
					if (this.goodsinfo.is_group == 0) {
						uni.navigateTo({
							url: '/pageshop/submitorder/submitorder?list=' + encodeURIComponent(JSON.stringify(list))
						})
					} else {
						uni.navigateTo({
							url: '/pageshop/groupbuying/groupbuying?list=' + encodeURIComponent(JSON.stringify(list))
						})
					}
				}
			},
			//加入购物车
			toShoppingCart(result) {
				console.log('加入购物车')
				this.carlist = uni.getStorageSync('carlist') || []
				let find = this.carlist.find(item => item.id == this.goodsinfo.id && (this.goodsinfo.spec_type == 10 ?
					true : item.info.spec_id == result.spec_id))
				if (find) {
					find.carnum = (+find.carnum) + (+result.goods_num[0])
				} else {
					this.goodsinfo.info = result
					this.goodsinfo.carnum = result.goods_num[0]
					this.carlist.push(this.goodsinfo)
				}
				uni.setStorageSync('carlist', this.carlist)
				this.close()
				uni.showToast({
					title: '加入购物车成功',
					icon: 'none'
				})
			},
			//跳转评论列表
			tocomment() {
				uni.navigateTo({
					url: '/personalData/comment/comment?list=' + JSON.stringify(this.commentList)
				})
			},
			//回到首页
			tohome() {
				// let pages = getCurrentPages();
				const pages = getCurrentPages()
				console.log(pages)
				if (pages.length > 1 && this.goodsinfo.goods_type == 2) {
					uni.redirectTo({
						url: '/pageshop/storeinfo/storeinfo?id=' + this.goodsinfo.store_id
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				// let prevPage = pages[pages.length - 2];
				// if (this.goodsinfo.goods_type == 2 && prevPage.route != 'pageshop/storeinfo/storeinfo') {
				// 	uni.redirectTo({ url: '/pageshop/storeinfo/storeinfo?id=' + this.goodsinfo.store_id })
				// } else {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	})
				// }
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.swiper {
		height: 750rpx;
		width: 100%;
	}

	.swiper-item {
		display: block;
		height: 750rpx;
		line-height: 750rpx;
		text-align: center;
		width: 100%;

		image {
			width: 100%;
			height: 750rpx;
		}
	}

	.pricebox {
		position: absolute;
		width: 650rpx;
		padding: 40rpx 20rpx;
		// height: 268rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		left: 50%;
		transform: translate(-50%, 0);
		margin: -40rpx auto 0 auto;
		z-index: 21;

		.numbox {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.leftbox {
				display: flex;
				align-items: flex-end;

				.originalprice {
					font-size: 48rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FE5326;

					>text {
						font-size: 26rpx;
					}
				}

				.crossedprice {
					font-size: 26rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #888888;
					text-decoration: line-through;
				}
			}

			.rightbox {
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #888888;
			}
		}

		.goodsname {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin: 22rpx 0 30rpx 0;
			-webkit-line-clamp: 3;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			min-height: 120rpx;
			>view{
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}


		.inventory {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;
			margin-top: 20rpx;
		}
	}

	.pickup {
		width: 650rpx;
		margin: 24rpx auto 24rpx auto;
		padding: 0rpx 20rpx;
		background-color: #FFF;
		height: 93rpx;
		border-radius: 20rpx;

		.stoke {
			height: 93rpx;
			display: flex;
			align-items: center;

			.stokename {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
				margin-right: 30rpx;
			}

			.delivery {
				display: flex;
				align-items: center;

				.deliveryitem {
					width: fit-content;
					padding: 0 26rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 24rpx;
					// border: 2rpx solid #CB9852;
					background: #F2F2F2;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					margin-right: 28rpx;
				}

				.actdelivery {
					width: fit-content;
					padding: 0 24rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #CB9852;
					// background: #F2F2F2;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #CB9852;
					margin-right: 28rpx;
				}
			}
		}
	}

	.guarantee {
		width: 650rpx;
		margin: 0 auto 24rpx auto;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;

		.wx {
			display: flex;
			height: 77rpx;
			align-items: center;
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			image {
				width: 32rpx;
				height: 30rpx;
				margin-right: 26rpx;
			}
		}
	}

	.commentbox {
		width: 650rpx;
		padding: 0 20rpx;
		margin: 0 auto;
		background-color: #FFF;

		.commentname {
			padding: 40rpx 0 20rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #333333;

			.morebox {
				color: #888888;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				image {
					width: 11rpx;
					height: 19rpx;
					margin-left: 16rpx;
				}
			}
		}

	}

	.goodstext {
		width: 690rpx;
		background-color: #FFF;
		margin: 24rpx auto;

		.titbox {
			display: flex;
			width: 650rpx;
			margin: 0 auto;
			height: 114rpx;
			align-items: center;

			image {
				width: 8rpx;
				height: 34rpx;
				margin-right: 14rpx;
			}
		}
		.contenr {
		  .img {
		    width: 100%;
		    display: block;
		  }
		}
	}

	.navbut {
		position: fixed;
		width: 94%;
		padding: 0 3%;
		height: 110rpx;
		background: #FFFFFF;
		bottom: 0;
		display: flex;
		z-index: 99;

		.actionnav {
			width: 15%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #444444;
			position: relative;

			.numbox {
				width: 45rpx;
				height: 45rpx;
				text-align: center;
				color: #FFF;
				line-height: 45rpx;
				position: absolute;
				background-color: red;
				border-radius: 100%;
				font-size: 23rpx;
				top: 0;
				right: 10rpx;
			}

			image {
				width: 56rpx;
				height: 56rpx;
				margin-top: 10rpx;
			}
		}

		.addact {
			width: 49%;
			display: flex;
			justify-content: center;
			margin: 10rpx auto;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;

			.but {
				width: 460rpx;
				height: 90rpx;
				background: linear-gradient(267deg, #F94D29 0%, #F99529 100%);
				border-radius: 46rpx;
				text-align: center;
				line-height: 90rpx;
				opacity: 1;
			}

			.car {
				width: 180rpx;
				height: 90rpx;
				background: linear-gradient(91deg, #C448F8 0%, #F848F2 100%);
				border-radius: 46rpx 0rpx 0rpx 46rpx;
				text-align: center;
				line-height: 90rpx;
			}

			.buy {
				width: 180rpx;
				height: 90rpx;
				background: linear-gradient(267deg, #F94D29 0%, #F99529 100%);
				border-radius: 0rpx 46rpx 46rpx 0rpx;
				text-align: center;
				line-height: 90rpx;
				opacity: 1;
			}
		}
	}
</style>